<template>
  <div>


<!-- 个人信息开始   -->
    <el-card class="box-card1" >
      <div id="left">
        <img src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png" alt="">
        <p>{{user.phone}}</p>
      </div>
      <div id="right">
        <p id="security">账号安全:{{AccountSecurity.grade}}</p>
        <p class="rp">{{AccountSecurity.phoneSetUp}}</p>
        <p class="rp">{{AccountSecurity.emailSetUp}}</p>
      </div>
    </el-card>
    <!-- 个人信息结束   -->
    <!-- 订单信息开始   -->
    <el-tabs type="border-card" class="box-card2">
          <el-tab-pane label="历史订单">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="id" label="订单编号" width="160" align="center"></el-table-column>
              <el-table-column prop="goodsName" label="商品名称" width="160" align="center"></el-table-column>
              <el-table-column prop="money" label="单价" width="110" align="center"></el-table-column>
              <el-table-column prop="num" label="数量" width="100" align="center"></el-table-column>
              <el-table-column prop="sumMoney" label="实付款" width="110" align="center"></el-table-column>
              <el-table-column prop="state" label="交易状态" width="127" align="center"></el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
    <!-- 订单信息结束   -->
    <!-- 收藏信息开始   -->
    <el-card class="box-card2">
      <div class="bc2dhead">
        <el-breadcrumb-item>我的收藏</el-breadcrumb-item>
        <a style="float: right" href="/information/collection">查看更多</a>
      </div>
      <div class="bc2dbottom">
        <el-row gutter="20">
          <el-col style="margin: 10px 0" span="6" v-for="p in productArr">
            <el-card>
              <a :href="'/deil?id='+p.gid">
                <img :src="p.url" width="100%" alt="" class="p_img">
              </a>
              <div style="padding: 30px 0 0 20px;">
                  <a style="text-decoration: none;color: #3f3f3f;font-size:smaller" :href="'/deil?id='+p.gid">
                    {{p.name}}
                  </a>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <!-- 收藏信息结束   -->
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      user:{
        phone:'188****2222'
      },
      AccountSecurity:{
        grade:'',
        phoneSetUp:'',
        emailSetUp:''
      },
      tableData: [],
      productArr:[]
    }
  },
  methods: {
    delete(){},
    //查手机号
    selectPhone(){
      let url = "http://localhost:8080/user/phone";
      axios.post(url).then((response)=>{
          this.user.phone=response.data.data;
      })
    },
    //查邮箱是否设置
    haveEmail(){
      let url = "http://localhost:8080/user/haveEmail";
      axios.post(url).then((response)=>{
        this.AccountSecurity.emailSetUp=response.data.data;
      })
    },
    //查手机号是否设置
    havePhone(){
      let url = "http://localhost:8080/user/havePhone";
      axios.post(url).then((response)=>{
        this.AccountSecurity.phoneSetUp=response.data.data;
      })
    },
    //查安全等级
    security(){
      let url = "http://localhost:8080/user/security";
      axios.post(url).then((response)=>{
        this.AccountSecurity.grade=response.data.data;
      })
    },
    //查已收货订单
    listStateIs3(){
      let url = "http://localhost:8080/order/listState3";
      axios.get(url).then((response)=>{
        this.tableData=response.data.data;
      })
    },
    //查收藏信息
    listCollection(){
      let url = "http://localhost:8080/collection/list";
      axios.get(url).then((response)=>{
        this.productArr=response.data.data;
      })
    },
  },
  mounted() {
    this.selectPhone();
    this.haveEmail();
    this.havePhone();
    this.security();
    this.listStateIs3();
    this.listCollection();
  }
}
</script>

<style scoped>
.box-card1{
  width: 800px;
  height: 200px;
  margin-bottom: 20px;
  background-color: rgba(234, 227, 184, 0.13);

}
.box-card2{
  width: 800px;
  height: 400px;
  margin-bottom: 20px;
  background-color: rgba(234, 227, 184, 0.13);
}
#left{
  width: 180px;
  height: 200px;
  float: left;
  padding-left: 40px;
}
#left>img{
  padding-left: 10px;
}
#left>p{

  padding-left: 20px;
}
#right{
  width: 200px;
  height: 200px;
  float: left;
  padding-left: 30px;
}
#security{
  padding: 20px 20px;
}
.rp{

  padding-left: 20px;
}
.bc2dhead{
  height: 30px;
  background-color: rgba(225, 225, 232, 0.87);
  padding: 5px 3px;

}
.bc2dbottom{
  height: 400px;

}
</style>